<template>
  <div>
    <div class="lotterySet">
      <div class="lotterySetLeft">
        <h3>活动页面预览</h3>
        <div>提示：只有一体机上完成支付的订单，会出现抽奖大转盘</div>
        <h4>奖品设置：</h4>
        <div>1、所有奖品累计中奖率之和为100%</div>
        <div>2、至少需要填写7个奖项，不包含“谢谢参与”</div>
        <div>3、如果勾选“谢谢参与”,则最多可填8个奖项</div>
        <div>
          4、中奖概率不能为0，如果不想车主抽中此商品,请将奖品数量设置为0
        </div>
      </div>
      <div class="lotterySetRight">
        <div class="giftInfoSet">
          <h3>奖品信息配置</h3>
          <h4>抽奖条件:</h4>
          <div class="activityTime">
            <span>1、活动时间：</span>
            <el-date-picker
              v-model="activityTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <div class="orderAmount">
            2、订单金额：累积大于等于
            <el-input
              placeholder="请输入金额"
              v-model="orderAmountValue"
              clearable
              style="width:150px"
            >
            </el-input>
            元时，可以抽奖
          </div>
          <div class="decideID">
            <span>3、抽奖的车主身份：</span>
            <div class="radioList">
              <el-radio v-model="radio" label="1" style="width:40%"
                >只允许会员抽奖</el-radio
              >
              <el-radio v-model="radio" label="2" style="width:40%"
                >只允许非会员抽奖</el-radio
              >
              <el-radio v-model="radio" label="3" style="width:40%"
                >允许所有人抽奖，且奖品中奖概率相同</el-radio
              >
              <el-radio v-model="radio" label="4" style="width:40%"
                >允许所有人抽奖，且会员与非会员奖品中奖概率不同</el-radio
              >
            </div>
          </div>
        </div>
        <div class="giftSet">
          <h3>奖品配置</h3>
          <div class="VIPSet">
            <h4>会员配置:</h4>
            <VIPSetList :vip="true"/>
          </div>
          <div class="notVIPSet">
            <h4>非会员配置:</h4>
            <VIPSetList :vip="false" />
          </div>
        </div>
      </div>
    </div>
    <div class="threeBtn">
      <el-button type="info">停止活动</el-button>
      <el-button type="success">保存</el-button>
      <el-button type="primary" >启动活动</el-button>
    </div>
  </div>
</template>

<script>
import VIPSetList from "../Mycomponents/VIPSetList";
export default {
  components: {
    VIPSetList,
  },
  data() {
    return {
      orderAmountValue: "", //订单最大金额
      activityTime: "", //优惠券活动时间
      radio: "1", //抽奖的车主身份选项
    };
  },
};
</script>

<style scoped>
.lotterySet {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid black;
}
.lotterySetLeft {
  float: left;
  width: 30%;
  box-sizing: border-box;
  padding: 20px 30px;
}
.lotterySetRight {
  float: right;
  border-left: 1px solid black;
  width: 70%;
  /* height: 600px; */
  box-sizing: border-box;
  padding: 20px 30px;
}
.activityTime {
  padding: 5px 0;
}
.orderAmount {
  padding: 5px 0;
}
.decideID span {
  vertical-align: top;
}
.radioList {
  width: 80%;
  display: inline-block;
}
.threeBtn{
  padding: 30px 0;
  text-align: center;
  
}
.threeBtn button{
    margin: 0 30px;
    width: 140px;
}
</style>
